<template>
  <div class="gl_contentBox gl_heightFull">
    <el-row :gutter="20" class="gl_mb_15">
      <el-col :md="8" :lg="6">
        <el-button :loading="deleteLoading" type="danger" size="mini" @click="removeMore">{{ $t('button.delete') }}</el-button>
        <el-button type="primary" size="mini" @click="writeMessage">{{ $t('button.toWrite') }}</el-button>
      </el-col>
    </el-row>
    <el-table ref="outboxTable" v-loading="loading" :data="outboxTable" size="mini" :row-style="{maxHeight: '44px'}" @selection-change="selection">
      <el-table-column type="selection" label-class-name="selection" />
      <el-table-column :label="$t('table.title')">
        <template slot-scope="scope">
          <!-- <i v-if="isIconState" class="iconfont icon_state icon_color" style="vertical-align: middle; font-size:24px" /> -->
          <span>{{ scope.row.message.title }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.addressee')">
        <template slot-scope="{row}">
          <el-popover placement="top-start" width="500" trigger="hover">
            <span v-for="(item, index) in row.targetUsers" :key="index">
              {{ item.name }}；
            </span>
            <span slot="reference" class="gl_ellipsis">
              <span v-for="(item, index) in row.targetUsers" :key="index">
                {{ item.name }}；
              </span>
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.message')">
        <template slot-scope="scope">
          <span v-html="scope.row.message.message">
            <!-- {{ scope.row.message }} -->
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.time')">
        <template slot-scope="{row}">
          <span v-if="row.message.messageDate">
            {{ row.message.messageDate | FormatDate('yyyy-MM-dd HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" @click="detail(row)">{{ $t('table.details') }}</el-button>
          <el-button size="mini" type="text" @click="remove(row)"><span class="gl_color_error">{{ $t('table.delete') }}</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_MessageGetSendingMessagesQO.Page"
        :page-size="Api_GET_MessageGetSendingMessagesQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <write :is-write="isWrite" @showWrite="showWrite" />
    <message :is-detail="isDetail" :row-data="rowData" @showDetail="showDetail" />
  </div>
</template>

<script>
import { translateByCode } from '@/lib/getTransData';
import { Api_GET_MessageGetSendingMessagesQO } from '@/lib/form/swaggerForm';
import { api_GET_MessageGetSendingMessages, api_DELETE_MessageDeleteSendingMessage } from '@/extend/api/swaggerApi/chat.js';
import write from './write';
import message from './message';
export default {
  name: 'Outbox',
  components: { write, message },
  data() {
    return {
      loading: false,
      deleteLoading: false,
      Api_GET_MessageGetSendingMessagesQO: new Api_GET_MessageGetSendingMessagesQO(),
      currentPage: 1, // 当前页
      totalPage: 0, // 总条目数
      isWrite: false, // 是否显示写通知
      isDetail: false, // 是否是编辑
      // isIconState: true,
      outboxTable: [],
      rowData: { // 通知详情
        message: {
          title: '标题',
          messageDate: '时间',
          message: '内容'
        }
      },
      outboxSelection: [] // 选中的数据
    };
  },
  created() {
    this.refreshList();
  },
  methods: {
    // 获得已发送的消息
    refreshList(page) {
      this.loading = true;
      this.Api_GET_MessageGetSendingMessagesQO.Page = page || 1;
      this.Api_GET_MessageGetSendingMessagesQO.SkipCount = (this.Api_GET_MessageGetSendingMessagesQO.Page - 1) * this.Api_GET_MessageGetSendingMessagesQO.MaxResultCount;
      api_GET_MessageGetSendingMessages(this.Api_GET_MessageGetSendingMessagesQO).then(res => {
        this.outboxTable = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 选中的数据
    selection(val) {
      this.outboxSelection = val;
    },
    // 查看详情
    detail(row) {
      this.rowData = row;
      this.isDetail = true;
    },
    showDetail(data) {
      this.isDetail = data;
    },
    // 写通知
    writeMessage() {
      this.isWrite = true;
    },
    showWrite(data) {
      this.isWrite = data;
    },
    // 单个删除
    remove(row) {
      this.$confirm(translateByCode('alert.wantDelete') + `[ ${row.message.title} ]` + translateByCode('alert.ma'), translateByCode('alert.delete'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        this.loading = true;
        const deleteData = [row.message.messageID];
        api_DELETE_MessageDeleteSendingMessage(deleteData).then(res => {
          this.loading = false;
          this.refreshList(this.Api_GET_MessageGetSendingMessagesQO.Page);
          this.$message({
            type: 'success',
            message: translateByCode('alert.deleteSuccessfully')
          });
        }).catch(() => {
          this.loading = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: translateByCode('alert.cancelDelete')
        });
      });
    },
    // 多个删除
    removeMore() {
      const messageIDList = this.outboxSelection.map(item => {
        return item.message.messageID;
      });
      if (this.outboxSelection && this.outboxSelection.length > 0) {
        this.$confirm(translateByCode('alert.removeMore'), translateByCode('alert.delete'), {
          confirmButtonText: translateByCode('alert.confirm'),
          cancelButtonText: translateByCode('alert.cancel'),
          type: 'warning'
        }).then(() => {
          this.deleteLoading = true;
          api_DELETE_MessageDeleteSendingMessage(messageIDList).then(res => {
            this.deleteLoading = false;
            this.refreshList(this.Api_GET_MessageGetSendingMessagesQO.Page);
            this.$message({
              type: 'success',
              message: translateByCode('alert.deleteSuccessfully')
            });
          }).catch(() => {
            this.deleteLoading = false;
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: translateByCode('alert.cancelDelete')
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: translateByCode('alert.unableDelete')
        });
      }
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Api_GET_MessageGetSendingMessagesQO.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    }
  }
};
</script>

<style scoped>
.icon_color {
  color: green;
}
.el-table /deep/ .cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 14px;
  max-height: 44px;
}
.el-table /deep/ .cell span img {
  max-width: 28px;
  max-width: 28px;
}
</style>
